<template>
  <child></child>
  <span>name由Jeremy被子组件注入操作变成{{ name }}</span>
  <sonComponent />
  <span>age由18被孙子组件注入操作变成{{ age }}</span>
</template>

<script lang="ts" setup>
// 引入子组件
import child from './children-component.vue'
import sonComponent from './grandson-component/index.vue'

// 把父级组件作为提供者 子级组件作为拿取者(注入者)
import { provide } from 'vue'
import { ref, watch } from 'vue'

let name = ref('Jeremy')
let age = ref(18)

// 声明provide
provide('provideState', {
  name,
  changeName: () => {
    name.value = 'Jack'
  },
  changeAge: () => {
    age.value = 100
  },
})

// 监听name的改变
watch(name, () => {
  setTimeout(() => {
    console.log(name.value)
  }, 1000)
})

// provide 是单向的 一个祖先组件不可以又作为 provide提供者 又作为 inject注入者，一个子级组件也不可为inject注入者 又当provide提供者
// 如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。
// 这一方面增加了耦合度，另一方面， 使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。
</script>
<style scoped>
.my-box {
  display: flex;
}
/* 支持CSS变量注入v-bind(color) */
</style>
